<template>
  <div>
    <button @click="fn1">点我获取</button>
    <button @click="fn2">快速父传子</button>
    <button @click="hi = 'hello'">改hi</button>
    <p>{{  hi }}</p>
    <p ref="p">这是p标签</p>
    <p ref="title">这是p标签2</p>

    <my-son ref="son" />

    <button v-if="show" @click="fn3">登录</button>
    <input id="txt" v-else ref="inp" type="text" />
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  components: {
    MySon
  },
  data () {
    return {
      show: true,
      hi: '你好'
    }
  },
  methods: {
    fn1 () {
      console.log(this.$refs.p)
      console.log(this.$refs.title)
      // 找到这个组件对象 -- 相当于是这个组件内部的this
      console.log(this.$refs.son)
    },

    fn2 () {
      this.$refs.son.msg = '父给的数据'
    },

    async fn3 () {
        // 1. 隐藏按钮并显示输入框
        // 仅仅只是数据发生改变，但是dom还没更新
        this.show = false
        // 2. 让输入框获得焦点
        // console.log(this.$refs.inp)
        // this.$refs.inp.focus()
        // 使用 $nextTick，这是一个回调函数
        // 这个回调函数会在下一次dom更新后调用-只在这里调用一次，别的数据改变不会影响
        // this.$nextTick( () => {
        //     this.$refs.inp.focus()
        // } )

        // 因为$nextTick会返回一个promise对象，所以如果你不想用回调函数
        // 还可以用.then，但是.then也有回调函数
        // this.$nextTick()
        // .then( () => {
        //     this.$refs.inp.focus()
        // })

        await this.$nextTick()
        // await后面的代码一定是下次dom更新后调用
        this.$refs.inp.focus()
    }
  },

  // 不要写到updated里，因为任意数据改变都会调用
//   updated () {
//     this.$refs.inp.focus()
//   }
}
</script>

<style></style>
